<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" style="cursor: pointer">
        <el-card class="card-item" @click="goUrl('/jin/register')">
          <div class="card-header">
            <span class="card-title">进件统计</span>
            <div class="rightMore">
              <span style="font-size: 14px; color: #1b95f1">更多</span>
              <el-icon color="#1b95f1"><ArrowRightBold /></el-icon>
            </div>
          </div>
          <div class="card-content">
            <div class="value">{{ totalApplicationCount || 0 }}</div>
            <div class="label">总进件量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" style="cursor: pointer">
        <el-card class="card-item" @click="goUrl('/pay/deal', 1)">
          <div class="card-header">
            <span class="card-title">日交易额</span>
            <div class="rightMore">
              <span style="font-size: 14px; color: #1b95f1">更多</span>
              <el-icon color="#1b95f1"><ArrowRightBold /></el-icon>
            </div>
          </div>
          <div class="card-content">
            <div class="value">￥{{ dailyAmount || 0 }}</div>
            <div class="label">当日交易额</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" style="cursor: pointer">
        <el-card class="card-item" @click="goUrl('/pay/deal', 2)">
          <div class="card-header">
            <span class="card-title">周交易额</span>
            <div class="rightMore">
              <span style="font-size: 14px; color: #1b95f1">更多</span>
              <el-icon color="#1b95f1"><ArrowRightBold /></el-icon>
            </div>
          </div>
          <div class="card-content">
            <div class="value">￥{{ weeklyAmount || 0 }}</div>
            <div class="label">本周交易额</div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" style="cursor: pointer">
        <el-card class="card-item" @click="goUrl('/pay/deal', 3)">
          <div class="card-header">
            <span class="card-title">月交易额</span>
            <div class="rightMore">
              <span style="font-size: 14px; color: #1b95f1">更多</span>
              <el-icon color="#1b95f1"><ArrowRightBold /></el-icon>
            </div>
          </div>
          <div class="card-content">
            <div class="value">￥{{ monthlyAmount || 0 }}</div>
            <div class="label">本月交易额</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div style="margin-top: 20px">
      <el-row :gutter="20" style="background-color: transparent">
        <el-col :xs="24" :sm="16" :lg="18">
          <el-card>
            <template #header>
              <div class="chartTop">
                <div class="left">
                  <el-button-group class="ml-4">
                    <el-button :type="chartShow1 === 0 ? 'primary' : ''" size="default" @click="handleActive(0)">交易额统计</el-button>
                    <el-button :type="chartShow1 === 1 ? 'primary' : ''" size="default" @click="handleActive(1)">交易笔数统计</el-button>
                  </el-button-group>
                  <!--                  <el-space :size="10" spacer="">
                    <span :class="{ active: chartShow1 === 0 }" @click="handleActive(0)">交易额统计</span>
                    <span :class="{ active: chartShow1 === 1 }" @click="handleActive(1)">交易笔数统计</span>
                  </el-space>-->
                </div>
                <div class="right">
                  <el-button-group class="ml-4" style="margin-right: 5px">
                    <el-button :type="time1 === 0 ? 'primary' : ''" size="default" @click="handleTime(1, 0)">近24小时</el-button>
                    <el-button :type="time1 === 1 ? 'primary' : ''" size="default" @click="handleTime(1, 1)">近一周</el-button>
                    <el-button :type="time1 === 2 ? 'primary' : ''" size="default" @click="handleTime(1, 2)">近一月</el-button>
                  </el-button-group>
                </div>
              </div>
            </template>
            <!--            <div id="box" ref="box"></div>-->
            <Charts v-if="chart1" ref="chartRef1" :option="option" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="8" :lg="6">
          <el-card class="card-item" style="height: 100%">
            <div class="card-header">
              <span class="card-title">商户当日交易额排名</span>
              <div class="rightMore" @click="goUrl('/pay/merchanttotal')"
                ><span style="color: #1b95f1">更多</span><el-icon color="#1b95f1"><ArrowRightBold /></el-icon
              ></div>
            </div>
            <div class="card-content">
              <ul class="ranking-list">
                <li v-for="(item, index) in ranking" :key="index" :style="index >= 11 ? 'margin-bottom:0px' : ''">
                  <span class="rank">{{ index + 1 }}</span>
                  <!--              <img :src="item.logo" :alt="item.name" width="50" height="50" />-->
                  <div class="name">{{ item?.merchantName }}</div>
                  <div class="amount">￥{{ item?.payPriceDe }}</div>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <el-row :gutter="20" style="background-color: transparent">
        <el-col :xs="24" :sm="12" :lg="12">
          <el-card>
            <template #header>
              <div class="chartTop">
                <div class="left">
                  <el-space :size="10" spacer="">
                    <span class="active">交易金额支付占比</span>
                  </el-space>
                </div>
                <div class="right">
                  <el-button-group class="ml-4" style="margin-right: 5px">
                    <el-button :type="time2 === 0 ? 'primary' : ''" size="size" @click="handleTime(2, 0)">近24小时</el-button>
                    <el-button :type="time2 === 1 ? 'primary' : ''" @click="handleTime(2, 1)">近一周</el-button>
                    <el-button :type="time2 === 2 ? 'primary' : ''" @click="handleTime(2, 2)">近一月</el-button>
                  </el-button-group>
                </div>
              </div>
            </template>
            <Charts v-if="chart2" ref="round" :option="option1" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="12">
          <el-card>
            <template #header>
              <div class="chartTop">
                <div class="left">
                  <el-space :size="10" spacer="">
                    <span class="active">交易笔数支付占比</span>
                  </el-space>
                </div>
                <div class="right">
                  <el-button-group class="ml-4" style="margin-right: 5px">
                    <el-button :type="time3 === 0 ? 'primary' : ''" size="size" @click="handleTime(3, 0)">近24小时</el-button>
                    <el-button :type="time3 === 1 ? 'primary' : ''" size="default" @click="handleTime(3, 1)">近一周</el-button>
                    <el-button :type="time3 === 2 ? 'primary' : ''" size="default" @click="handleTime(3, 2)">近一月</el-button>
                  </el-button-group>
                </div>
              </div>
            </template>
            <Charts v-if="chart3" ref="round1" :option="option2" />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { dayjs, ElCard, ElCol, ElRow } from 'element-plus';
  import Charts from '@/components/charts/index.vue';
  import { getChart, getRound, getTotal, getMerTotalList } from '@/api/analysis';
  import { useRouter } from 'vue-router';

  // 图表组件
  const chartRef1 = ref();
  const chartShow1 = ref<number>(0);
  const date = ref([dayjs(), dayjs()]);
  const time1 = ref<number>(0);
  const time2 = ref<number>(0);
  const time3 = ref<number>(0);
  const num24 = ref({ label: [], value: [] });
  const num7 = ref({ label: [], value: [] });
  const num30 = ref({ label: [], value: [] });
  const money24 = ref({ label: [], value: [] });
  const money7 = ref({ label: [], value: [] });
  const money30 = ref({ label: [], value: [] });
  const roundPrice24 = ref<any>([]);
  const roundPrice7 = ref<any>([]);
  const roundPrice30 = ref<any>([]);
  const roundNum24 = ref<any>([]);
  const roundNum7 = ref<any>([]);
  const roundNum30 = ref<any>([]);
  const chart1 = ref(false);
  const chart2 = ref(false);
  const chart3 = ref(false);
  const ranking = ref([]);
  /**
   * @description: 切换tab
   * @params: 1：交易统计 2：交易金额方式占比 3： 交易笔数方式占比
   * @date 2023-06-14 17:54
   */
  const handleTime = (type: number, num: number) => {
    // chartRef1.value.reloadChart();
    if (type === 1) {
      chart1.value = false;
      time1.value = num;
      if (chartShow1.value === 0) {
        option.value.yAxis[0].name = '单位/元';
        option.value.series[0].name = '交易金额';
        if (time1.value === 0) {
          option.value.xAxis[0].data = money24.value.label;
          option.value.series[0].data = money24.value.value;
          option.value.xAxis[0].axisLabel.rotate = -30;
        } else if (time1.value === 1) {
          option.value.xAxis[0].data = money7.value.label;
          option.value.series[0].data = money7.value.value;
          option.value.xAxis[0].axisLabel.rotate = 0;
        } else {
          option.value.xAxis[0].data = money30.value.label;
          option.value.series[0].data = money30.value.value;
          option.value.xAxis[0].axisLabel.rotate = -30;
        }
      } else {
        option.value.yAxis[0].name = '单位/笔';
        option.value.series[0].name = '交易数量';
        if (time1.value === 0) {
          option.value.xAxis[0].data = num24.value.label;
          option.value.series[0].data = num24.value.value;
          option.value.xAxis[0].axisLabel.rotate = -30;
        } else if (time1.value === 1) {
          option.value.xAxis[0].data = num7.value.label;
          option.value.series[0].data = num7.value.value;
          option.value.xAxis[0].axisLabel.rotate = 0;
        } else {
          option.value.xAxis[0].data = num30.value.label;
          option.value.series[0].data = num30.value.value;
          option.value.xAxis[0].axisLabel.rotate = -30;
        }
      }

      setTimeout(() => {
        chart1.value = true;
      }, 100);
    } else if (type === 2) {
      time2.value = num;
      chart2.value = false;
      if (time2.value === 0) {
        option1.value.series[0].data = roundPrice24.value;
      } else if (time2.value === 1) {
        option1.value.series[0].data = roundPrice7.value;
      } else {
        option1.value.series[0].data = roundPrice30.value;
      }
      setTimeout(() => {
        chart2.value = true;
      }, 100);
    } else if (type === 3) {
      time3.value = num;
      chart3.value = false;
      if (time3.value === 0) {
        option2.value.series[0].data = roundNum24.value;
      } else if (time3.value === 1) {
        option2.value.series[0].data = roundNum7.value;
      } else {
        option2.value.series[0].data = roundNum30.value;
      }
      setTimeout(() => {
        chart3.value = true;
      }, 100);
    }
    return;
    // date.value = [dayjs().endOf(num), dayjs()];
    if (num === 1) {
      date.value = [dayjs(), dayjs()];
    } else {
      date.value = [dayjs().add(-num, 'day'), dayjs()];
    }
  };
  /**
   * @description: 切换交易金额/数据
   * @date 2023-06-15 10:04
   */
  const handleActive = (num: number) => {
    if (chartShow1.value === num) return;
    chartShow1.value = num;
    chart1.value = false;
    if (num === 0) {
      option.value.yAxis[0].name = '单位/元';
      option.value.series[0].name = '交易金额';
      if (time1.value === 0) {
        option.value.xAxis[0].data = money24.value.label;
        option.value.series[0].data = money24.value.value;
        option.value.xAxis[0].axisLabel.rotate = -30;
      } else if (time1.value === 1) {
        option.value.xAxis[0].data = money7.value.label;
        option.value.series[0].data = money7.value.value;
        option.value.xAxis[0].axisLabel.rotate = 0;
      } else {
        option.value.xAxis[0].data = money30.value.label;
        option.value.series[0].data = money30.value.value;
        option.value.xAxis[0].axisLabel.rotate = -30;
      }
    } else {
      option.value.yAxis[0].name = '单位/笔';
      option.value.series[0].name = '交易数量';
      if (time1.value === 0) {
        option.value.xAxis[0].data = num24.value.label;
        option.value.series[0].data = num24.value.value;
        option.value.xAxis[0].axisLabel.rotate = -30;
      } else if (time1.value === 1) {
        option.value.xAxis[0].data = num7.value.label;
        option.value.series[0].data = num7.value.value;
        option.value.xAxis[0].axisLabel.rotate = 0;
      } else {
        option.value.xAxis[0].data = num30.value.label;
        option.value.series[0].data = num30.value.value;
        option.value.xAxis[0].axisLabel.rotate = -30;
      }
    }
    setTimeout(() => {
      chart1.value = true;
    }, 100);
  };
  // 数据定义
  const totalApplicationCount = ref<number | string | null>(0);
  const dailyAmount = ref<number | string>(0);
  const weeklyAmount = ref<number | string>(0);
  const monthlyAmount = ref<number | string>(0);
  // 顶部数据
  let dataTotal = await getTotal();
  totalApplicationCount.value = dataTotal.data.fileCount;
  dailyAmount.value = dataTotal.data.totalDay;
  weeklyAmount.value = dataTotal.data.totalWeek;
  monthlyAmount.value = dataTotal.data.totalMonth;
  // 排名数据
  getMerTotalList({
    pageNum: 1,
    pageSize: 12,
    params: {
      beginTime: dayjs().format('YYYY-MM-DD'),
      endTime: dayjs().format('YYYY-MM-DD'),
    },
  }).then((res) => {
    ranking.value = res.rows;
  });
  // 图表配置项
  const round = ref(null);
  const round1 = ref(null);
  const option = ref({
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          interval: 0,
          rotate: -30,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '交易金额',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220],
      },
    ],
  });
  const option1 = ref({
    title: {
      text: '交易金额支付占比',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '支付方式',
        type: 'pie',
        radius: ['40%', '70%'],
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: true,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 26,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: true,
        },
        data: [
          { value: 1048, name: '微信' },
          { value: 735, name: '支付宝' },
          { value: 580, name: '银联' },
          { value: 484, name: 'google pay' },
          { value: 300, name: 'jd pay' },
        ],
      },
    ],
  });
  const option2 = ref({
    title: {
      text: '交易笔数支付占比',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '支付方式',
        type: 'pie',
        radius: ['40%', '70%'],
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: true,
        },
        labelLine: {
          show: true,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 26,
            fontWeight: 'bold',
          },
        },
        data: [
          { value: 1048, name: '微信' },
          { value: 735, name: '支付宝' },
          { value: 580, name: '银联' },
          { value: 484, name: 'google pay' },
          { value: 300, name: 'jd pay' },
        ],
      },
    ],
  });
  onMounted(async () => {
    // 柱状图图表数据
    let { data } = await getChart();
    data.forEach((item) => {
      if (item.liable === '近24小时交易量') {
        num24.value.value = item.value.map((v) => v.data);
        num24.value.label = item.value.map((v) => v.timedata);
      } else if (item.liable === '近7天交易量') {
        num7.value.value = item.value.map((v) => v.data);
        num7.value.label = item.value.map((v) => v.timedata);
      } else if (item.liable === '近30天交易量') {
        num30.value.value = item.value.map((v) => v.data);
        num30.value.label = item.value.map((v) => v.timedata);
      } else if (item.liable === '近24小时交易金额') {
        money24.value.value = item.value.map((v) => v.data);
        money24.value.label = item.value.map((v) => v.timedata);
      } else if (item.liable === '近7天交易金额') {
        money7.value.value = item.value.map((v) => v.data);
        money7.value.label = item.value.map((v) => v.timedata);
      } else if (item.liable === '近30天交易金额') {
        money30.value.value = item.value.map((v) => v.data);
        money30.value.label = item.value.map((v) => v.timedata);
      }
    });
    option.value.xAxis[0].data = money24.value.label;
    option.value.series[0].data = money24.value.value;
    chart1.value = true;
    // 饼状图数据
    let data1 = await getRound();
    // 饼状图数据
    data1.data.price.forEach((item: any) => {
      if (item.liable.indexOf('24小时') !== -1) {
        // 24小时支付类型金额
        roundPrice24.value.push({
          value: item.value,
          name: item.liable,
        });
      } else if (item.liable.indexOf('7天') !== -1) {
        roundPrice7.value.push({
          value: item.value,
          name: item.liable,
        });
      } else {
        roundPrice30.value.push({
          value: item.value,
          name: item.liable,
        });
      }
    });
    data1.data.counts.forEach((item: any) => {
      if (item.liable.indexOf('24小时') !== -1) {
        roundNum24.value.push({
          value: item.value,
          name: item.liable,
        });
      } else if (item.liable.indexOf('7天') !== -1) {
        roundNum7.value.push({
          value: item.value,
          name: item.liable,
        });
      } else {
        roundNum30.value.push({
          value: item.value,
          name: item.liable,
        });
      }
    });
    option1.value.series[0].data = roundPrice24.value;
    option2.value.series[0].data = roundNum24.value;
    chart2.value = true;
    chart3.value = true;
  });
  /**
   * @description: 跳转路由
   * @params: query: 1: 日交易额; 2: 周交易额; 3: 月交易额
   * @date 2023-06-15 15:05
   */
  const router = useRouter();
  const goUrl = (path: string, query?: number) => {
    if (query !== undefined) {
      let time = {
        beginTime: null,
        endTime: dayjs().format('YYYY-MM-DD'),
      } as any;
      if (query === 1) {
        time.beginTime = dayjs().format('YYYY-MM-DD');
      } else if (query === 2) {
        time.beginTime = dayjs().startOf('week').format('YYYY-MM-DD');
      } else {
        time.beginTime = dayjs().startOf('month').format('YYYY-MM-DD');
      }
      router.push({ path, query: time });
    } else {
      router.push({ path });
    }
  };
</script>

<style scoped>
  #box {
    width: 100%;
    height: 480px;
  }
  .box {
    width: 100%;
    height: 100%;
  }
  .chartTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    .left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: #000000;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      .active {
        color: #1890ff;
      }
    }
    .right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
  .dashboard {
    padding: 20px;
    min-height: calc(100vh - 80px);
    background: #f0f2f5;
  }

  .title {
    //margin-top: 40px;
    //margin-bottom: 20px;
    font-weight: bold;
    font-size: 18px;
    color: #333;
  }

  .card-item {
    //padding: 20px;
    background: #fff;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 16px;
    color: #333;
  }
  .rightMore {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
  }
  .card-title {
    margin-right: 10px;
  }

  .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .value {
    font-size: 28px;
    font-weight: bold;
    color: #3182bd;
    margin-bottom: 10px;
  }

  .label {
    font-size: 14px;
    color: #999;
  }

  .ranking-list {
    list-style: none;
    padding-left: 0;
    width: 100%;
  }

  .ranking-list li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
  }

  .rank {
    font-size: 24px;
    font-weight: bold;
    color: #666;
    margin-right: 20px;
  }

  .name {
    font-size: 14px;
    font-weight: 500;
  }

  .amount {
    font-size: 14px;
    color: #000000;
    margin-left: auto;
  }
</style>
<style lang="scss" scoped>
  .pos {
    position: relative;
    .abs {
      position: absolute;
      top: -0px;
      right: 0;
      z-index: 999;
    }
  }
</style>
